<!-- 卡片>安全指数排名 -->
<template>
  <div class="columnChart">
    <div class="container">
      <div class="card-title" style="cursor: default">
        <span class="card-title-text">安全指数排名</span>
      </div>
      <span class="open-btn" v-if="!isOpen" @click="openScoreList"></span>
      <span class="close-btn" v-else @click="openScoreList"></span>
      <div class="groups">
        <div class="safe-list-input" v-show="isOpen">
          <i class="search-icon"></i>
          <el-input v-model="unitText" placeholder="请输入内容" class="search-input" @keyup.enter.native="getOrgScoreList"></el-input>
        </div>
        <div class="groups-list">
          <template v-if="unitGroup">
            <div v-for="(item, index) in unitGroup" :key="index">
              <div class="items" v-if="index < (isOpen ? unitGroup.length : 6)">
                <span class="logo">
                  <el-image fit="cover" :src="item.orgLogo">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </span>
                <div class="progress">
                  <div class="progress-top" @click="$Ctl.fixedPosition(item.mapLocation)">
                    <!-- 地图定位 -->
                    <span class="position"></span>
                    <!-- 跳转》单单位首页 -->
                    <span class="text" @click="$Ctl.enterSingleHome({ orgId: item.orgId })">{{ item.orgName }}</span>
                    <!-- 跳转》安全评估 -->
                    <span
                      class="score"
                      @click.stop="
                        $Ctl.enterDetail('FireSafetyAssess', {
                          orgId: item.orgId,
                        })
                      "
                      :style="{
                        color: transColor(item.safetyScore),
                      }"
                    >{{ item.safetyScore }}</span>
                  </div>
                  <div class="progress-bottom">
                    <el-progress :show-text="false" :stroke-width="8" :percentage="item.safetyScore" :color="transColor(item.safetyScore)"></el-progress>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div v-else class="text-align-center">
            <img :src="this.GLOBAL.defultDataSrc" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrgsSafetyScore } from '@/api/safetyIndex'
export default {
  data() {
    return {
      unitGroup: [],
      isOpen: false,
      unitText: '',
      isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser, //0:单单位用户;1:多单位用户
    }
  },
  props: ['currentSaftyStatus'],
  watch: {
    currentSaftyStatus(value) {
      this.isOpen = value
    },
  },
  components: {},
  methods: {
    //获取列表
    getOrgScoreList() {
      let that = this
      that.$Ctl.loading(1, 10000)
      getOrgsSafetyScore({
        orgIds: that.$store.state.userInfo.organizationIds,
        sortType: this.bsConfig.orgSafetyScoreSort || 0,
        dataType: 0,
        orgName: that.unitText,
        dType: localStorage.getItem('ilinkBs_currentMapType'),
      }).then((res) => {
        this.$store.commit('setUnitGroup', res.data)
        that.unitGroup = res.data || []
        that.$Ctl.loading(0)
      })
    },
    //展开
    openScoreList() {
      let that = this
      let newArr = []
      that.unitText = ''
      that.getOrgScoreList()
      if (!that.isOpen) {
        that.isOpen = true
        let arr = that.bsConfig.LeftMenu.cards // 获取全局的菜单配置
        // 遍历卡片配置，将其他的高度设为0,
        for (let i = 0; i < arr.length; i++) {
          let obj = $.extend({}, arr[i])
          if (arr[i].id == 'CardSafetyIndexRanking') {
            obj.height = '85%'
          } else {
            if (arr[i].id != 'CardLogo') {
              obj.height = '0'
            }
          }
          newArr.push(obj)
        }
      } else {
        that.isOpen = false
        newArr = that.bsConfig.LeftMenu.cards // 获取全局的菜单配置
      }

      //通知父组件卡片组发生变化
      that.$emit('isOpenSaftyList', newArr, that.isOpen)
    },
    transDefaltLodo(logo) {
      if (logo) {
        return logo
      } else {
        return this.GLOBAL.defultLogo
      }
    },
    //改变进度条颜色
    transColor(score) {
      if (score < 80) {
        return '#CE334F'
      } else if (score >= 80 && score < 90) {
        return '#F0A045'
      } else {
        return '#6CBF98'
      }
    },
  },
  created() {
    let that = this
    that.getOrgScoreList()

    if (that.isMuilUnitUser) {
      //推送只推一级首页
      window.FunList.orgsSafetyScore_ws = (wsData) => {
        let list = wsData || []
        if (this.bsConfig.orgSafetyScoreSort == 1) {
          list = list.sort((a, b) => {
            return b.safetyScore - a.safetyScore
          })
        }
        // 推送来的数据没有mapLocation
        that.unitGroup = list.map((n) => {
          let obj = this.unitGroup.filter((m) => {
            return m.orgId == n.orgId
          })[0]
          if (obj) n.mapLocation = obj.mapLocation
          return n
        })
      }
    }
    window.FunList.openSafeScoreList = that.openScoreList
  },
}
</script>
<style rel="stylesheet/scss" lang="scss">
.columnChart {
  height: 100%;
  width: 100%;
  font-size: 16px;
  .container {
    width: 100%;
    height: 100%;
    position: relative;
    .open-btn {
      float: right;
      cursor: pointer;
      width: 24px;
      height: 13px;
      background: url(../../assets/images/homeLeft/icon-up.png) 0 0 no-repeat;
      background-size: cover;
      margin-top: 6px;
      position: absolute;
      top: 5px;
      right: 13px;
    }
    .close-btn {
      float: right;
      cursor: pointer;
      width: 13px;
      height: 13px;
      background: url(../../assets/images/homeLeft/close.png) 0 0 no-repeat;
      background-size: cover;
      margin-top: 6px;
      position: absolute;
      top: 5px;
      right: 13px;
    }
    .groups {
      width: 100%;
      height: calc(100% - 32px);
      .groups-list {
        width: 100%;
        height: 92%;
        margin-top: 5%;
        overflow-y: auto;
      }
      .items {
        width: 100%;
        height: 38px;
        margin-bottom: 20px;
        .logo {
          width: 32px;
          height: 32px;
          display: block;
          margin-top: 4px;
          float: left;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }
        .progress {
          width: 86%;
          height: 40px;
          float: left;
          background: url(../../assets/images/homeLeft/left-frame.png) 0 0
              no-repeat,
            url(../../assets/images/homeLeft/right-frame.png) 0 0 no-repeat;
          background-position: left, right;
          background-size: contain;
          margin-left: 10px;
          .progress-top {
            width: 100%;
            display: inline-block;
            padding: 0 15px;
            .position {
              background: url(../../assets/images/homeLeft/fix.png) 0 0
                no-repeat;
              width: 20px;
              height: 17px;
              float: left;
              background-size: contain;
              margin-top: 0.3em;
              cursor: pointer;
            }
            .text {
              font-size: 1.125em;
              color: #fff;
              cursor: pointer;
              width: 75%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: pre;
              float: left;
            }
            .score {
              font-size: 1.325em;
              color: #ce334f;
              float: right;
              cursor: pointer;
            }
          }
          .progress-bottom {
            margin: 5px 15px;
            margin-top: 0;
            .el-progress-bar__outer {
              background-color: rgba(235, 238, 245, 0.15);
            }
          }
        }
      }
      .safe-list-input {
        width: 97%;
        height: 40px;
        margin: 15px 0;
        background: url(../../assets/images/homeLeft/search-bg.png) 0 0
          no-repeat;
        background-size: 100% 100%;
        position: relative;
        .search-icon {
          width: 20px;
          height: 20px;
          background: url(../../assets/images/homeLeft/search.png) 0 0 no-repeat;
          background-size: 100% 100%;
          position: absolute;
          left: 20px;
          top: 10px;
        }
        .search-input {
          width: 100%;
          height: 100%;
          padding-left: 12%;
          outline: none;
          .el-input__inner {
            background-color: rgba(255, 255, 255, 0);
            color: #fff;
            border: none;
          }
          input::-webkit-input-placeholder {
            color: #505961;
          }
          input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #505961;
          }
          input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #505961;
          }
          input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: #505961;
          }
        }
      }
    }
  }
}
</style>